import Tabs, { TabsProps } from '@/components/Tabs';
import React, { useState } from 'react';
import { useIntl } from 'umi';
import AmmeterData from './components/AmmeterData';
import EventsInfo from './components/EventsInfo';
import HistoryData from './components/HistoryData';
import RealtimeMonitor from './components/RealtimeMonitor';

const LCMonitor: React.FC = () => {
  const [activeKey, setActiveKey] = useState('1');
  const onChange = (key: string) => {
    setActiveKey(key);
  };
  const intl = useIntl();
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.realTimePowerTitle' }),
      children: <RealtimeMonitor />,
    },
    {
      key: '2',
      label: intl.formatMessage({ id: 'data.historicalData' }),
      children: <HistoryData />,
    },
    {
      key: '3',
      label: intl.formatMessage({ id: 'pcsMonitoring.eventInformation' }),
      children: <EventsInfo />,
    },
    {
      key: '4',
      label: intl.formatMessage({ id: 'systemManagement.neddTochange.meterData' }),
      children: <AmmeterData />,
    },
  ];
  return (
    <>
      <Tabs
        items={items}
        hasChildTabs={activeKey === '4'}
        activeKey={activeKey}
        onChange={onChange}
      ></Tabs>
    </>
  );
};

export default LCMonitor;
